<template>
	<div class="routinelogoperation">
		<el-card>
			<template #header>
				<div class="card-header clearfix">
					<span>操作日志</span>
					<div class="header-right">
						<el-button type="primary" v-if="isAuthBtn('add')" ><i class="fa fa-send"></i>Btn</el-button>
					</div>
				</div>
			</template>
			<div class="operationData">
				<div class="operationData-harder">
					<div >
						<el-select
							v-model="state.operatortype"
							:multiple="false"
							placeholder="Select"
							style="width: 100px"
						>
						<el-option
						  v-for="item,index in state.pageInfo.operatortypeList"
						  :key="index"
						  :label="item.name"
						  :value="item.key"
						/>
						</el-select>
						<el-select
							v-model="state.businesstype"
							:multiple="false"
							placeholder="Select"
							style="width: 100px;margin-left:10px;"
						>
						<el-option
						  v-for="item,index in state.pageInfo.businesstypeList"
						  :key="index"
						  :label="item.name"
						  :value="item.key"
						/>
						</el-select>
						<el-select
							v-model="state.status"
							:multiple="false"
							placeholder="操作状态"
							style="width: 100px;margin-left:10px;"
						>
							<el-option
							label="操作状态"
							value=""
							/>
							<el-option
							label="正常"
							value="0"
							/>
							<el-option
							label="异常"
							value="1"
							/>
						</el-select>
						<el-date-picker
							style="vertical-align: bottom;margin-left:10px;"
							v-model="state.selectTime"
							:shortcuts="shortcuts"
							type="daterange"
							range-separator="To"
							value-format="YYYY-MM-DD"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
						/>
						<el-input v-model="state.key" clearable placeholder="搜索关键字" style="width:180px; margin-left:10px;"></el-input>
						<el-button style="margin-left:10px;" @click="chaxunBtn">查找</el-button>
					</div>
					<div style="margin: 10px 0;">
						<el-button type="primary" size="default" @click="state.uid='';getLogList();" v-if="state.uid">清除用户条件</el-button>
						<el-button type="primary" size="default" @click="state.logtype='';getLogList();" v-if="state.logtype">清除操作类型</el-button>
						<el-button type="primary" size="default" @click="state.ip='';getLogList();" v-if="state.ip">清除操作IP</el-button>
					</div>
				</div>
				<div>
					<Table
						ref="tableRef"
						v-bind="state.tableData"
						class="table-demo"
						@pageChange="onTablePageChange"
						@sortHeader="onSortHeader"
						@columnCzBtn="onColumnCzBtn"
						@columnClick="onColumnClick"
					/>
				</div>
			</div>
		</el-card>
		<el-dialog v-model="state.detailShow">
			<div>{{state.details}}</div>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { toRefs,ref, reactive,onMounted, defineComponent ,defineAsyncComponent} from 'vue';
import { useRouter } from 'vue-router'
import { ElNotification, ElMessage ,ElMessageBox} from 'element-plus'
import { pageInfo } from '/@/api';
import { logApi } from '/@/api/log';
import commonFunction from '/@/utils/commonFunction';//复制
const { copyText } = commonFunction();

// 引入组件
const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
// 定义变量内容
const tableRef = ref<RefType>();

const router = useRouter();

const state = reactive({
	roleBtn:router.currentRoute.value.meta.roleBtn,
	dataList:[],
	tbloading:true,
	pages: {
        isAll: false,
        pageCount: 0,
        pageSize: 10,
        recordCount: 0,
        pno: 1
	},
	pageInfo:{
		tbhdList:[],
		logtypeList:[],
		operatortypeList:[],
		businesstypeList:[],
	},
	uid:'',
	ip:'',
	logtype:'',
	status:'',
	key:'',
	minDate:'',
	maxDate:'',
	operatortype:"",
	businesstype:"",
	selectTime:[],
	detailShow:false,
	details:"",
	tableData:{
		data: [],// 列表数据（必传）
		// 表头内容（必传，注意格式）
		header: [],
		// 配置项（必传）
		config: {
			total: 0, // 列表总数
			loading: true, // loading 加载
			isBorder: false, // 是否显示表格边框
			isSerialNo: false, // 是否显示表格序号
			isSelection: true, // 是否显示表格多选
			isExcel: true, // 是否可以导出
			excelName:"操作日志"
		},
		btn:[]
	},
	czBtn:[]
});
const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

// 复制函数
// const onCopyClick = (e) => {
// 	copyText(e).then(() => {

// 	});
// };
const chaxunBtn=()=>{
	//  console.log(state.selectTime)
	if(state.selectTime){
		state.minDate=state.selectTime[0];
		state.maxDate=state.selectTime[1];
		state.tableData.config.excelName="操作日志"+state.minDate+'~'+state.maxDate
	}else{
		state.minDate="";
		state.maxDate="";
	}
	getLogList();
}
// 表单点击回调
const onColumnClick = (row: EmptyObjectType) => {
	if(row.key=='sort'){
		state.orderBy={
			order:row.data.order,
			prop:row.data.prop
		}
		getRoleList();
	}
	let item=row.item,data=row.data;
	if(item.type=='link'||item.type=='user'){
		if(item.prop=='user'){
			state.uid=data.uid;
			getLogList();
		}
		if(item.prop=='log_type'){
			state.logtype=data.log_type;
			getLogList();
		}
		if(item.prop=='log_ip'){
			state.ip=data.log_ip;
			getLogList();
		}
	}
	// getTableData();
};
// 表单操作回调
const onColumnCzBtn = (row: EmptyObjectType) => {
	let type=row.key;
	let item=row.data;
};
// 分页改变时回调
const onTablePageChange = (page: TableDemoPageType) => {
	state.pages.pageSize=page.pageSize;
	getLogList(page.pno);
};
// 拖动显示列排序回调
const onSortHeader = (data: TableHeaderType[]) => {
	state.tableData.header = data;
};
// 获取页面前置
const getpageInfo=()=>{
	pageInfo('log',{path:'operation'}).then(res=>{
		state.pageInfo.tbhdList=res.tbhdList;
		state.pageInfo.logtypeList=res.logtypeList;
		state.pageInfo.operatortypeList=res.operatortypeList;
		state.pageInfo.businesstypeList=res.businesstypeList;
		state.tableData.header=res.tbhdList;
		let btn=[];
		for(let p of state.czBtn){
			if(isAuthBtn(p)){
				btn.push(p);
			}
		}
		state.tableData.btn=btn;
		getLogList();
	})
}
// 获取操作日志信息
const getLogList=(pno)=>{
	state.tableData.config.loading=true;
	if(!pno){
		pno=1;
	}
	let dt={
		pages:{
			pno:pno,
			pageSize:state.pages.pageSize
		},
		data:{
			uid:state.uid,
			ip:state.ip,
			log_type:state.logtype,
			status:state.status,
			key:state.key,
			minDate:state.minDate,
			maxDate:state.maxDate,
			operator_type:state.operatortype,
			business_type:state.businesstype,
		}
	}
	logApi("operationLog",dt).then(res=>{
		//  console.log(res)
		state.dataList=res.list;
		state.pages=res.pages;
		state.tbloading=false;
		state.tableData.data=res.list;
		state.tableData.config.total=res.pages.recordCount;
		state.tableData.config.loading = false;
	})
}

// 权限判断
const isAuthBtn = (e) => {
	let auth=false;
	if(e){
		for(let p of state.roleBtn){
			if(p==e){
				auth=true;
			}
		}
	}
	return auth;
};
// 跳转
const tourl = (e) => {
	router.push(e);
};

onMounted(()=>{
      // 获取当前路由实例参数
    //   //  console.dir(router.currentRoute.value.query.id);
      //  console.dir(router.currentRoute.value.meta.roleBtn);
	  if(!isAuthBtn('index')){
		  router.push('/401');
	  }else{
		  //操作函数
		  getpageInfo();
	  }
})
</script>

<style scoped lang="scss">
	.routinelogoperation{
		padding:5px;
	}
</style>
